<template>
    <div>
        <el-row>
            <el-input label="haaha" style="width: 10%"/>
            <el-button>搜搜</el-button>
        </el-row>
        <el-row>

            <el-table :data="tableData" style="width: 100%">
                <template v-for="(column,i) in columns" :key="i">
                    <el-table-column v-bind:prop="column.key" v-bind:label="column.label" :width="column.width == null?400:column.width"/>
                </template>

            </el-table>
        </el-row>
    </div>
</template>


<script>
    const NAME = "x-table"
    export default {
        data() {
            return {
                // tableData: [
                //     {
                //         date: '2016-05-03',
                //         name: 'Tom',
                //         address: 'No. 189, Grove St, Los Angeles',
                //     },
                //     {
                //         date: '2016-05-02',
                //         name: 'Tom',
                //         address: 'No. 189, Grove St, Los Angeles',
                //     },
                //     {
                //         date: '2016-05-04',
                //         name: 'Tom',
                //         address: 'No. 189, Grove St, Los Angeles',
                //     },
                //     {
                //         date: '2016-05-01',
                //         name: 'Tom',
                //         address: 'No. 189, Grove St, Los Angeles',
                //     },
                // ]
            }
        },
        name: NAME,
        props: {
            columns: {
                type: Array
            },
            tableData: {
                type: Array
            }

        }
    }
</script>
<style scoped>

</style>